<template>
  <div>
    <div class="icon">
      <i class="el-icon-reading"></i>
      选修课程
    </div>
    <div class="tables">
      <el-row>
        <el-col :span="8" :offset="15">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input class="input" v-model="formInline.courseName" placeholder="课程名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input class="input" v-model="formInline.teacherName" placeholder="教师名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page.sync="formInline.index"
            :page-size="8"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="courseId"
              label="课程ld"
              width="180">
            </el-table-column>
            <el-table-column
              prop="courseName"
              label="课程名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="teacherName"
              label="教师">
            </el-table-column>
            <el-table-column
              prop="courseCredit"
              label="学分">
            </el-table-column>
            <el-table-column
              prop="courseTime"
              label="上课时间">
            </el-table-column>
            <el-table-column
              prop="courseSelectedCount"
              label="已选人数">
            </el-table-column>
            <el-table-column
              prop="courseMaxSize"
              label="课程容量">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleEdit(scope.$index, scope.row)">选修
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {get, post} from "../../../common/request";

  export default {
    name: "ChoseCourse",
    data() {
      return {
        formInline: {
          courseName: '',
          teacherName: '',
          index: 1
        },
        tableData: [],
        total: 10
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log("这个是row"+row.courseId);
        post("/rc-student-course/selectCourse/" + row.courseId).then(x =>{
          console.log(x)
          if(x.code== 1 ){
            this.$message.success(x.msg);
            this.getData();
          }else{
            this.$message.error(x.msg);
          }
        })
      },
      onSubmit() {
        console.log('submit!');
      },
      handleCurrentChange(val) {
        console.log(val)
      },
      getData(){
        get("/rc-student/searchCourse", this.formInline).then(x => {
          // 设置当前页码
          this.formInline.index = x.data.pageNum;
          // 设置总页数
          this.total = x.data.total;
          // 数据表格
          this.tableData = x.data.list;
          console.log(this.formInline.index)
          console.log(this.total)
          console.log(this.tableData)
        })
      }
    },
    mounted() {
      this.getData()
    }
  }
</script>


<style scoped>
  .icon {
    color: dimgray;
    line-height: 20px;
    text-align: left;
  }

  .tables {
    background-color: white;
    border-radius: 5px;
    border: 1px solid lightgrey;
    margin-top: 10px;
    padding: 10px 30px 10px 30px;
  }

  .input {
    width: 180px;
  }
</style>
